<template>
    <div>
    <el-row>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="登陆人">
                <el-input v-model="formInline.loginName" placeholder="登陆人"></el-input>
            </el-form-item>
            <el-form-item label="登陆时间">
                <el-input v-model="formInline.loginTime" placeholder="登陆时间"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="clearc">清除</el-button>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="primary" @click="handleAdd">添加</el-button>
            </el-form-item>
            </el-form>
            
    </el-row>
    <el-row>
        <el-table
        :data="tableData"
        style="width: 100%">
         <el-table-column
            prop="loginName"
            label="登陆人"
            width="140">
        </el-table-column>
         <el-table-column
            prop="ipaddr"
            label="登录IP"
            width="140">
        </el-table-column>
        <el-table-column
            prop="loginLocation"
            label="登录地点"
            width="140">
        </el-table-column>
         <el-table-column
            prop="browser"
            label="浏览器类型"
            width="140">
        </el-table-column>
        <el-table-column
          prop="status"
          label="菜单状态"
          width="140">
          <template slot-scope="scope">
            <p  v-if="tableData[scope.$index].status==0">正常</p>
            <p  v-if="tableData[scope.$index].status==1">失败</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="msg"
          label="备注"
          width="140">
        </el-table-column>
        <el-table-column
            prop="loginTime"
            label="访问时间"
            width="200">
        </el-table-column>
        <el-table-column label="操作" width="200">
            <template slot-scope="scope">
                <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                 <el-button
                     size="mini"
                     type="danger"
                     @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
         </el-table-column>
        </el-table>
     </el-row>
     <el-row>
           <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[2,3,5,10,20,100, 200, 300, 400]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
     </el-row>
    </div>
</template>
<script>
export default {
     data() {
        return {
          tableData: [],
          currentPage:1,
          role: [],
          total:100,
          formInline: {loginName:'',loginTime:''},
          pageSize:5
        }
      },
      // 初始化数据  mounted()
      created:function(){
              this.loadData();
            //   this.roleData();
      },
        methods: {
                //封装数据请求
                loadData(){
                    var _this=this;
                    this.$http.post("/ss/loginLog/queryAll?pageNo="+this.currentPage+"&pageSize="+this.pageSize+"&loginName="+this.formInline.loginName+"&loginTime="+this.formInline.loginTime).then((response) => {
                    //alert(JSON.stringify(response.data))
                    _this.tableData=response.data.t.list;
                    _this.total=response.data.t.total;
               })
                },
                // roleData(){
                //     var _this=this
                //     this.$http.post("/ss/role/queryAll?pageNo").then((response) => {
                //     alert(JSON.stringify(response.data))
                //     _this.role=response.data.t.list;
                //     })
                // },
                
                 //处理编辑
                handleEdit(index, row) {
                    console.log(index, row);
                },
                //处理删除
                handleDelete(index, row) {
                    console.log(index, row);
                },
                //分页 每页数量变化时处理
                handleSizeChange(val) {
                    console.log(`每页 ${val} 条`);
                    this.pageSize=val;
                    this.loadData();
                },
                 //分页 第几页变化时处理
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                    this.currentPage=val;
                    this.loadData();
                },
                //点击查询方法
                 onSubmit() {
                    console.log('submit!');
                     this.loadData();
                },
                //清楚查询条件
                clearc(){
                        this.formInline.loginName='';
                        this.formInline.loginTime='';
                        this.loadData();
                }
        }
}
</script>
<style>

</style>